
<!DOCTYPE html>
<html>
	
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script src="./jquery-1.12.0.min.js"></script>
</head>
<body>

<h1>WebSocket示例</h1>
<input type="text" id="data"/>
<button>打开连接</button>
<button>发送数据</button>
<button>关闭连接</button>
<p id="msg"></p>
<script type="text/javascript">


$(function(){
	var socket;
	$("button:eq(0)").click(function(){
		try{
			socket = new WebSocket("ws://127.0.0.1:8000");
			socket.onopen = function(e){
				console.log(9,e)
				$('#msg').html('连接成功')
			}
			socket.onmessage = function(e){
				console.log(5,e)
				$("#msg").html($("#msg").html() + "<br />" + e.data); 
			}
			// socket.onclose = function(e){
			// 	$('#msg').html('已关闭');
			// };
		}catch(exception){
			console.log(9999)
		}
	});

	
	$("button:eq(1)").click(function(){

		var datas = $('#data').val();
		console.log(9,datas)
		socket.send($("#data").val()); 
            $("#msg").html($("#msg").html() + "<br />发送数据：" + $("#data").val()); 
		
		
	});
	$("button:eq(2)").click(function() { 
        socket.close(); 
		$('#msg').html('已关闭');
    }); 


})
</script>
</body>
</html>